<template>
	<view>
		<template v-for="(v,i) in obj.trees" :key="i">
			<template v-if="props.level>1||props.depts.includes(v.label)">
				<view class="labelbox" :style="{'padding-left': `${(props.level-1)*20}rpx`}" @click="labelChange(v,i)">
					<image class="icon mr10" :src="`../static/${((v.children&&v.children.length)||v.detail)?'file':'fileimg'}.png`" mode="aspectFill"></image>
					<view class="label lineOne flex1 mr20">{{v.label}}</view>
					<image v-if="!((v.children&&v.children.length)||v.detail)" style="width: 20rpx;height: 20rpx;opacity: 0.6;" src="../static/4.png" mode="aspectFill"></image>
				</view>
				<FileTree
					v-show="!v.hideTree"
					v-if="v.children&&v.children.length"
					:trees="v.children"
					:index="i"
					:project="props.project"
					:filepath="props.filepath?(`${props.filepath},${v.label}`):v.label"
					:level="props.level+1"
					:key="v.label"
					@labelChange="handleChange" />
			</template>
		</template>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch,computed,nextTick } from 'vue'
	import { onLoad,onShow,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';
	import FileTree from './FileTree.vue'
    let { proxy } = getCurrentInstance()
	const emit = defineEmits(['labelChange'])
	const props = defineProps({
		trees: { type: Array, default:()=>{return []}},
		index: { type: Number, default: -1},
		level: { type: Number, default: 1},
		filepath: { type: String, default: ''},
		project: { type: Object, default: ()=>{return {}}},
		depts: { type: Array, default: []},
	})
	
	let obj = reactive({
		trees: [],
		hideTree: true,
	})
	
	onMounted(()=>{
		obj.trees = props.trees
		obj.trees.map(e=>{
			e.hideTree = props.level==1
		})
	})
	
	const labelChange=async(v,i)=>{
		if((v.children&&v.children.length)||v.detail){
			emit('labelChange',[props.index,i])
		}else{
			let query = {
				filepath: props.filepath?(props.filepath+','+v.label):v.label,
				project_id: props.project.project_id,
				project_name: props.project.name,
				type: props.project.type,
				roles: v.roles?JSON.stringify(v.roles):''
			}
			proxy.$c.go_url(`/pages/filedetail${proxy.$c.JSONToUrl(query)}`)
		}
	}
	
	const handleChange=(e)=>{
		obj.trees[e[0]].children[e[1]].hideTree = !obj.trees[e[0]].children[e[1]].hideTree
	}
</script>

<style lang="scss" scoped>
	.labelbox{
		width: 670rpx;height: 100rpx;border-top: solid 1rpx #f9f9f9;border-bottom: solid 1rpx #f9f9f9;box-sizing: border-box;
		display: flex;flex-direction: row;align-items: center;
		padding-right: 20rpx;font-size: 28rpx;
		.icon{width: 40rpx;height: 40rpx;margin-left: 20rpx;}
		.label{flex: 1;}
		.lineOne{
			display: -webkit-flex;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			word-break: break-all;
		}
	}
</style>
